import { Card } from "antd";
import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
//饼图
export default class Pie extends Component {
  getOption1 = () => {
    return {
      title: {
        text: "圆环图的例子",
        subtext: "纯属虚构",
        x: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a}<br/>{b} :{c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视屏广告", "搜索引擎"],
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 335, name: "视屏广告" },
            { value: 335, name: "搜索引擎" },
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0,0,0,0.5)",
            },
          },
        },
      ],
    };
  };
  getOption3 = () => {
    return {
      title: {
        text: "圆环图的例子",
        subtext: "纯属虚构",
        x: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a}<br/>{b} :{c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视屏广告", "搜索引擎"],
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 335, name: "视屏广告" },
            { value: 335, name: "搜索引擎" },
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0,0,0,0.5)",
            },
          },
        },
      ],
    };
  };
  getOption2 = () => {
    return {
      backgroundColor: "#2c343c",
      title: {
        text: "圆环图的例子2",
        left: "center",
        top: 20,
        textStyle: {
          color: "#ccc",
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{a}<br/>{b} :{c} ({d}%)",
      },

      visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
          colorLightness: [0, 1],
        },
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 335, name: "视屏广告" },
            { value: 335, name: "搜索引擎" },
          ].sort(function (a, b) {
            return a.value - b.value;
          }),
          roseType: "radius",
          label: {
            normal: {
              textStyle: {
                color: "rgba(255,255,255,0.3)",
              },
            },
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
          },
          itemStyle: {
            normal: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0,0,0,0.5)",
            },
          },
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx) {
            return Math.random() * 200;
          },
        },
      ],
    };
  };
  render() {
    return (
      <div>
        <Card title="饼图一">
          <ReactEcharts
            option={this.getOption1()}
            style={{ height: 300 }}
          ></ReactEcharts>
        </Card>
        <Card title="饼图二">
          <ReactEcharts
            option={this.getOption2()}
            style={{ height: 300 }}
          ></ReactEcharts>
        </Card>
      </div>
    );
  }
}
